import {computed, designComponent, useClasses} from "plain-design-composition";
import React from "react";
import {PlIcon} from "plain-design";

export const SystemMonitorCard = designComponent({
    props: {
        icon: {type: String, required: true},
        iconColor: {type: String, required: true},
        title: {type: String, required: true},
        showMore: {type: Boolean, default: true},
        bodyPadding: {type: Boolean, default: true,},

        number: {type: String},
        desc: {type: String},
        percent: {type: String},
        caret: {type: String},
        caretStatus: {type: String},
    },
    slots: ['default', 'headRight'],
    setup({props, slots}) {

        const bodyClasses = useClasses(() => [
            'system-monitor-card-body',
            {
                'system-monitor-card-body-padding': props.bodyPadding,
            }
        ])

        const iconColor = computed(() => {
            const {iconColor} = props
            if (['primary', 'success', 'warn', 'error', 'info'].indexOf(iconColor) > -1) {
                return {
                    maskClass: `pl-background-${iconColor}`,
                    maskStyles: {},
                    iconStatus: iconColor,
                    iconStyles: {},
                }
            } else {
                return {
                    maskClass: ``,
                    maskStyles: {backgroundColor: iconColor,},
                    iconStatus: undefined,
                    iconStyles: {color: iconColor,},
                }
            }
        })

        return () => (
            <div className="system-monitor-card">
                <div className="system-monitor-card-head">
                    <div className={`system-monitor-card-head-icon-mask ${iconColor.value.maskClass}`} style={iconColor.value.maskStyles}/>
                    <PlIcon icon={props.icon} status={iconColor.value.iconStatus} className={"system-monitor-card-head-icon"} style={iconColor.value.iconStyles}/>
                    <div className="system-monitor-card-head-title">{props.title}</div>
                    <div className="system-monitor-card-head-placeholder"/>
                    {slots.headRight(!!props.showMore && <PlIcon icon="el-icon-menu" status={'primary'}/>)}
                </div>
                <div className={bodyClasses.value}>
                    {slots.default(<>
                        <div className="system-monitor-card-number system-monitor-big-number">{props.number}</div>
                        <div className="system-monitor-card-number-detail">
                            <div className="system-monitor-card-detail-desc">{props.desc}</div>
                            <div className="system-monitor-card-detail-desc">{!!props.caret && <PlIcon icon={`el-icon-caret-${props.caret}`} status={props.caretStatus}/>}<span>{props.percent}</span></div>
                        </div>
                    </>)}
                </div>
            </div>
        )
    },
})